<template>
  <div>
    <el-row>
      <h1>员工管理</h1>
      <el-form ref="formRef" :rules="rules" :model="form" label-width="80px">
        <el-row :gutter="24">
          <el-col :span="5">
            <el-form-item prop="employeeName" label="姓名:">
              <el-input v-model="form.employeeName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="staffCard" label="身份证:">
              <el-input v-model="form.staffCard"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item prop="staffOffice" label="职位:">
              <el-select v-model="form.staffOffice" placeholder="请选择">
                <el-option
                    :label="StaffOffice.office"
                    :value="StaffOffice.id"
                    v-for="StaffOffice in staffOffices"
                    :key="StaffOffice.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item prop="employmentTime" label="入职时间">
              <el-date-picker
                  v-model="form.employmentTime"
                  type="date"
                  placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="5">
            <el-form-item prop="phone" label="手机号:">
              <el-input v-model="form.phone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item prop="homePlace" label="现住址:">
              <el-input v-model="form.homePlace"></el-input>
            </el-form-item>
          </el-col>

        </el-row>

        <el-form-item>
          <el-row :gutter="24">
            <el-col :span="6" :offset="2">
              <el-button type="primary" @click="onSubmit('formRef')">立即创建</el-button>
            </el-col>
            <el-col :span="6">
              <el-button @click="handleEmpty('formRef')">清空</el-button>
            </el-col>
            <el-col :span="6">
              <el-button @click="officeDialog=true">职位详情</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>
      <el-col :span="20" :offset="1">
        <el-table
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(255, 255, 255c, 0.9)"

            :data="tableData"
            border
            style="width: 100%">
            border
            style="width: 100%">
          <el-table-column
              fixed
              prop="id"
              label="ID"
              width="50">
          </el-table-column>
          <el-table-column
              prop="employeeName"
              label="姓名"
              width="120">
          </el-table-column>

          <el-table-column
              prop="staffCard"
              label="身份证号"
              width="167">
          </el-table-column>
          <el-table-column
              prop="homePlace"
              label="家庭住址"
              width="376">
          </el-table-column>
          <el-table-column
              prop="office.office"
              label="现职位"
              width="120">
          </el-table-column>
          <el-table-column
              prop="phone"
              label="联系方式"
              width="120">
          </el-table-column>
          <el-table-column
              label="操作"
              width="100">
            <template slot-scope="scope">
              <el-button @click="changeInfo(scope.row.id)" type="text" size="small">修改</el-button>
              <el-button @click="operateInfo(scope.row.id)" type="text" size="small">操作</el-button>
            </template>
          </el-table-column>
        </el-table>
          <el-pagination
              @current-change="handleCurrentChange"
              :page-size="pageSize"
              layout="prev, pager, next"
              :total="this.total">
          </el-pagination>
      </el-col>
    </el-row>

    <el-dialog style="width: 100%" title="职位详情" :visible.sync="officeDialog">
      <el-row>
        <el-col :span="6">
          <el-input placeholder="请输入职位名称" v-model="officeChange.office"></el-input>
        </el-col>
        <el-col :span="6" :offset="1">
          <el-input placeholder="请输入负责人姓名" v-model="officeChange.manage"></el-input>
        </el-col>
        <el-col :span="6">
          <el-popconfirm
              confirm-button-text='好的'
              cancel-button-text='不用了'
              icon="el-icon-info"
              icon-color="red"
              title="请确认是否提交？"
              @confirm="updateOffice()"
          >
            <el-button slot="reference" type="warning">提 交</el-button>
          </el-popconfirm>
        </el-col>
      </el-row>

      <el-table  max-height="250"  style="width: 50%" :data="staffOffices">
        <el-table-column
            prop="id"
            label="编号"
            height="2"
            width="50">
        </el-table-column>
        <el-table-column
            prop="office"
            label="职称"
            width="100">
        </el-table-column>
        <el-table-column
            prop="manage"
            label="负责人"
            width="100">
        </el-table-column>
        <el-table-column
            label="操作"
            width="100">
          <template slot-scope="scope">
            <el-button @click="changeOffice(scope.row.id)" type="text" size="small">操作</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="修改职位详情" :visible.sync="officeUpdate">
      <el-row>
        <el-col :span="10">
          <el-input placeholder="请输入职位名称" v-model="officeUpdateForm.office"></el-input>
        </el-col>
        <el-col :span="10" :offset="1">
          <el-input placeholder="请输入职位名称" v-model="officeUpdateForm.manage"></el-input>
        </el-col>
        <el-col :span="2">
          <el-button @click="officeByUpdateId()">提交</el-button>
        </el-col>
      </el-row>
    </el-dialog>

    <el-dialog title="操作" :visible.sync="dialogVisible" width="30%"
               :before-close="handleClose">
      <el-row>
        <el-col :span="24">
          <span>请确认{{ ruleForm.employeeName }}员工是否离职：</span>
          <el-select v-model="enable" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <br>
      <el-row>
        <el-col :span="24">
          <el-button @click="dialogVisible = false">取 消</el-button>
          &nbsp;
          <el-popconfirm
              confirm-button-text='好的'
              cancel-button-text='不用了'
              icon="el-icon-info"
              icon-color="red"
              title="确定该员工已离职？"
              @confirm="changeEnable()"
          >
            <el-button slot="reference" type="warning">确 定</el-button>
          </el-popconfirm>


        </el-col>
      </el-row>

    </el-dialog>


    <el-dialog title="信息详情" :visible.sync="dialogFormVisible">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="姓名" prop="employeeName">
              <el-input style="width: 100px" v-model="ruleForm.employeeName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="职位">
              <el-select style="width: 100px" v-model="ruleForm.officeId" placeholder="请选择">
                <el-option
                    :label="StaffOffice.office"
                    :value="StaffOffice.id"
                    v-for="StaffOffice in staffOffices"
                    :key="StaffOffice.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="身份证号" prop="staffCard">
          <el-row :gutter="24">
            <el-col :span="10">
              <el-input value="ruleForm.staffCard" v-model="ruleForm.staffCard"></el-input>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item label="入职时间">
          <el-col :span="4">
            <div>{{ ruleForm.employmentTime }}</div>
          </el-col>
        </el-form-item>

        <el-form-item label="手机号码" prop="phone">
          <el-row :gutter="24">
            <el-col :span="8">
              <el-input type="text" v-model="ruleForm.phone"></el-input>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item label="家庭住址" prop="homePlace">
          <el-row :gutter="24">
            <el-col :span="18">
              <el-input type="textarea" class="no-resize" v-model="ruleForm.homePlace"></el-input>
            </el-col>
          </el-row>
        </el-form-item>


        <el-form-item>
          <template slot-scope="scope">
            <el-button type="primary" @click="submitForm(scope.id)">提交</el-button>
          </template>
        </el-form-item>
      </el-form>

    </el-dialog>
  </div>
</template>
<script>
import index from "vuex";
import {enable} from "core-js/internals/internal-metadata";

export default {
  data() {
    return {
      form: {
        employeeName: "",
        staffCard: "",
        staffOffice: "",
        birthday: "",
        homePlace: "",
        phone: "",
        employmentTime: "",
      },
      loading:true,
      pageNum:1,
      pageSize:'',
      total:0,
      officeChange:{
        office:'',
        manage:'',
      },
      staffOffices: [],
      tableData: [],
      officeDialog:false,
      dialogFormVisible: false,
      officeUpdate:false,
      formLabelWidth: '100px',
      officeId: '',
      officeUpdateForm:{},
      dialogVisible: false,
      ruleForm: {},
      enable:1,
      options: [{
        value: 1,
        label: '在职'
      }, {
        value: 0,
        label: '离职'
      }],
      rules: {
        employeeName: [
          {required: true, message: '请输入名称', trigger: 'blur'},
          {min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur'}
        ],
        staffCard: [
          {required: true, message: '请输入身份证', trigger: 'blur'}
        ],
        staffOffice: [
          {required: true, message: '请选择职位', trigger: 'blur'}
        ],
        homePlace: [
          {required: true, message: '请输入家庭住址', trigger: 'blur'}
        ],
        employmentTime: [
          {type: 'date', required: true, message: '请选择入职时间', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '请填写手机号', trigger: 'blur'}
        ]
      }

    }
  },
  created() {
      this.getAllOffice();
      this.getAllStaff();
  },
  methods: {
    getAllStaff() {
      this.$axios.get("manage/selectStaff",{params:{pageNum:this.pageNum,pageSize:"3"}})
          .then(response => {
            console.log(response);
            this.total = response.data.data.total;
            this.pageSize = response.data.data.size;
            this.tableData = response.data.data.records;
            this.loading=false;
          })
    },

    onSubmit(rulForm) {
      this.officeId = JSON.stringify(this.form.staffOffice);
      this.$refs[rulForm].validate((valid) => {
        if (valid) {
          this.$axios.post("manage/saveOrUpdateStaff", this.form, {params: {officeId: this.officeId}})
              .then(response => {
                this.$message({
                  showClose: true,
                  message: '添加成功',
                  type: 'success',
                });
                this.form = Object.assign({}, this.initialFormData);
                this.getAllStaff();
              });
        } else {
          this.$message({
            showClose: true,
            message: '错误！有信息未填写',
            type: 'error',
          });
          return false;
        }
      });

    },
    getAllOffice() {
      this.$axios.get("manage/showAllOffice")
          .then(response => {
            console.log(response.data);
            this.staffOffices = response.data.data;
            console.log(this.staffOffices);
          })
    },
    handleEmpty(formRef) {
      this.$refs[formRef].resetFields();
      // this.form = this.$options.data().form;
      console.log(this.form);
    },
    submitForm(formRef) {
      // this.$refs[formRef].validate((valid) => {
      //   if (valid) {
      //     alert('submit!');
      //   } else {
      //     console.log('error submit!!');
      //     return false;
      //   }
      // });
      this.$axios.post("manage/saveOrUpdateStaff", this.ruleForm)
          .then(response => {
            if (response.data.code == 200) {
              this.$message({
                showClose: true,
                message: '修改成功',
                type: 'success',
              });
              this.dialogFormVisible = false;
              this.getAllStaff();
            }
          })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    changeInfo(id) {
      this.dialogFormVisible = true;
      this.$axios.get("manage/selectStaffById", {params: {id: id}})
          .then(response => {
            this.ruleForm = response.data.data;
            console.log(this.ruleForm);
          });
    },
    operateInfo(id) {
      this.dialogVisible = true;
      this.$axios.get("manage/selectStaffById", {params: {id: id}})
          .then(response => {
            this.ruleForm = response.data.data;
          });
    },
    changeEnable(){
      this.dialogVisible=true;
      this.ruleForm.enable = this.enable
      this.$axios.post("manage/changeStaffEnable",this.ruleForm)
          .then(response =>{
            this.$message({
              showClose: true,
              message: '修改成功',
              type: 'success',
            });
            this.getAllStaff();
            this.dialogVisible=false;
          })
    },
    handleCurrentChange(val){
      this.pageNum = val;
      this.loading = true;
      this.$axios.get("manage/selectStaff",{params:{pageNum:val,pageSize:this.pageSize}})
          .then(response=>{
            this.tableData = response.data.data.records;
            this.loading = false;
          })
    },
    updateOffice(){
      this.officeDialog=true;
      if (this.officeChange.office===''||this.officeChange.manage==='') {
        this.$message({
          showClose: true,
          message: '有未填写的信息！',
          type: 'error',
        });
        return;
      }
      this.$axios.post("manage/insertOffice",this.officeChange)
          .then(res=>{
            this.officeChange.office='';
            this.officeChange.manage='';
            this.$message({
              showClose: true,
              message: '添加成功',
              type: 'success',
            });
            this.getAllOffice();
          })
    },
    changeOffice(id){
      this.officeUpdate=true;
      this.$axios.get("manage/selectOfficeByID",{params:{id:id}})
          .then(response=>{
            this.officeUpdateForm = response.data.data;
          })
    },
    officeByUpdateId(){
      if (this.officeUpdateForm.office===''||this.officeUpdateForm.manage===''){
        this.$message({
          showClose: true,
          message: '有未填写的信息！',
          type: 'error',
        });
        return;
      }
      this.$axios.post("manage/updateOffice",this.officeUpdateForm)
          .then(response=>{
            this.officeUpdate=false;
            this.getAllOffice();
          })
    }
  }
}
</script>


<style scoped>
.no-resize {
  resize: none;
}
</style>
